import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { createSetPageErrorAction } from '@/redux/actions/pageError'
import LotteryInfo from './info'
import LotteryCountDown from './countDown'
import LotteryCondition from './condition'
import LotteryPrize from './prize'
import LotteryResult from './result'
import css from './index.module.scss'
import { lotteryApi } from '@/api'
class Lottery extends PureComponent {

    state = {
        info: null,
        prizes: null
    }

    get hasInfo() {
        return !!this.state.info
    }
    get hasPrizes() {
        return !!this.state.prizes
    }

    get id() {
        const { match: { params: { id } } } = this.props
        return id
    }

    // 是否已开奖
    get isOpened() {
        return this.state?.prizes?.status === 2 ?? false
    }

    initData = async () => {
        try {
            await this.getInfo()
            await this.getPrizes()
        } catch (error) {
            this.props.setPageError(true)
        }
    }

    getInfo = async () => {
        try {
            const { data } = await lotteryApi.getDetail({
                dynamic_id: this.id
            })
            if (data) {
                this.setState({
                    info: data.card
                })
            }            
        } catch (error) {
            throw new Error(error)
        }
    }

    getPrizes = async () => {
        try {
            const { data } = await lotteryApi.getPrize({
                business_id: this.id
            })
            if (data) {
                this.setState({
                    prizes: data
                })
            }
        } catch (error) {
            
        }
    }

    componentDidMount() {
        this.initData()
    }

    componentDidUpdate(prevProps) {
        const prevId = prevProps.match.params.id
        if (prevId !== this.id) {
            this.initData()
        }
    }

    render() {
        const {  info, prizes } = this.state
        return (
            <>
                {
                    this.hasInfo && <div>
                        <LotteryInfo info={info} />                           
                        {
                            this.hasPrizes && !this.isOpened && <>    
                                <LotteryCountDown prizes={prizes} />                               
                                <LotteryCondition prizes={prizes} />
                                <LotteryPrize prizes={prizes} />
                            </>
                        }
                        {
                            this.hasPrizes && this.isOpened && <LotteryResult prizes={prizes} />
                        }                            
                        <div className={css["tip"]}>该抽奖已自动过滤异常行为，请以开奖结果为准</div>
                    </div>
                }
            </>                
        )               
    }
}
export default connect(
    null,
    {
        setPageError: createSetPageErrorAction
    }
)(Lottery)